@import "mixin.scss";
@import "var.scss";
//首页
.index {
    .index_banner {
        display: flex;
        height: 485px;
        overflow: hidden;
        .index_banner-left {
            width: 240px;
            background: $bg-white;
            &>h1 {
                font-size: 16px;
                line-height: 40px;
                color: $fc-blue;
                text-indent: 12px;
                border-bottom: 1px solid $border-gray;
            }
            .index_banner-left-con {
                padding: 0 12px;
                box-sizing: border-box;
                padding-top: 15px;
                &>h1 {
                    display: flex;
                    font-size: 14px;
                    color: $fc-blue;
                    align-items: center;
                    margin-bottom: 12px;
                    i {
                        margin-right: 11px;
                    }
                }
                &>p {
                    display: flex;
                    flex-wrap: wrap;
                    padding-left: 24px;
                    padding-bottom: 5px;
                    border-bottom: 1px solid $border-gray;
                    a {
                        font-size: 12px;
                        color: $fc-gray;
                        margin-right: 16px;
                        min-width: 48px;
                        margin-bottom: 10px;
                        &:hover {
                            color: $fc-blue;
                        }
                    }
                }
                &:nth-last-child(1) {
                    p {
                        border-bottom: none;
                    }
                }
            }
        }
        .index_banner-center {
            width: 750px;
            .index_banner-center-swiper {
                width: 100%;
                height: 485px;
            }
            .swiper-pagination-bullet {
                width: 14px;
                height: 14px;
                box-sizing: border-box;
                background: rgba(0, 0, 0, .3);
                opacity: 1;
                margin: 0 4px;
            }
            .swiper-pagination-bullet-active {
                background: transparent;
                border: 2px solid rgba(0, 0, 0, .3);
            }
            a {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            img {
                display: block;
            }
        }
        .index_banner-right {
            width: 210px;
            background: #fdfdfd;
            margin: 18px 0px;
            .user {
                display: flex;
                align-items: center;
                padding-left: 12px;
                margin: 14px 0;
                .user-head {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: url(../img/user_bg.png);
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &>img {
                        display: block;
                    }
                }
                &>p {
                    flex: 1;
                    text-align: center;
                    font-size: 14px;
                    color: #555;
                }
            }
            .btn {
                display: flex;
                justify-content: space-between;
                padding: 0 10px 14px 10px;
                border-bottom: 1px solid $border-gray;
                &>button {
                    display: block;
                    width: 90px;
                    height: 30px;
                    color: $fc-blue;
                    background: $bg-white;
                    border: 2px solid $border-blue;
                    font-size: 14px;
                }
                &>.cur {
                    background: $bg-blue;
                    color: $fc-white;
                }
            }
            .notice {
                padding: 2px 10px 0 10px;
                border-bottom: 1px solid $border-gray;
                .notice-title {
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid $border-gray;
                    p {
                        padding: 0 6px;
                        border-bottom: 2px solid $border-blue;
                        margin-bottom: -1px;
                        font-size: 12px;
                        line-height: 24px;
                        color: $fc-base;
                    }
                    a {
                        display: block;
                        font-size: 12px;
                        color: $fc-gray;
                        line-height: 24px;
                        &:hover {
                            color: $fc-blue;
                        }
                    }
                }
                .notice-a {
                    padding-top: 20px;
                    padding-bottom: 8px;
                    &>a {
                        display: block;
                        line-height: 1;
                        font-size: 12px;
                        color: #555;
                        margin-bottom: 12px;
                        width: 190px;
                        @include ellipsis;
                        &:hover {
                            color: $fc-base;
                        }
                    }
                }
            }
            .banner {
                padding: 14px 10px;
                a,
                img {
                    display: block;
                    width: 190px;
                    height: 120px;
                }
            }
        }
    }
    @mixin indexBg {
        background: #f4f4f4;
    }
    .index_bg {
        // background: #f4f4f4;
        @include indexBg;
    }
    .index_search-box {
        @include indexBg;
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
        @mixin boxShadow {
            box-shadow: 0px 5px 5px 0px rgba(7, 1, 2, 0.07);
        }
        .index_search {
            width: 720px;
            height: 174px;
            padding-top: 32px;
            background: $bg-white;
            border-top: 2px solid #9fb5f8;
            box-sizing: border-box;
            @include boxShadow();
            .index_search-option-box {
                display: flex;
                padding: 0 15px;
                margin-bottom: 32px;
            }
            .index_search-option {
                border: 1px solid $border-gray;
                border-right: none;
                height: 74px;
                padding: 0 15px;
                position: relative;
                &:nth-last-child(1) {
                    flex: 1;
                    border-right: 1px solid $border-gray;
                    display: flex;
                    justify-content: center;
                }
                .index_search-option-sub {
                    position: absolute;
                    width: 130px;
                    max-height: 94px;
                    background: $bg-white;
                    border: 1px solid $border-gray;
                    padding: 24px 0;
                    top: 66px;
                    left: 15px;
                    overflow: hidden;
                    overflow-y: auto;
                    @include boxShadow();
                    &>p {
                        display: block;
                        font-size: 12px;
                        color: $fc-base;
                        line-height: 30px;
                        cursor: pointer;
                        text-indent: 20px;
                        &:hover {
                            background: #f8f8f8;
                        }
                    }
                    &>.cur {
                        color: $fc-blue;
                    }
                }
                h1 {
                    font-size: 14px;
                    line-height: 40px;
                    color: $fc-blue;
                }
                &>p {
                    display: flex;
                    justify-content: space-between;
                    width: 130px;
                    cursor: pointer;
                    font-size: 12px;
                    color: $fc-gray;
                }
                input {
                    background: #f4f4f4;
                    font-size: 12px;
                    color: $fc-gray;
                    height: 24px;
                    line-height: 24px;
                    text-indent: 12px;
                    border-radius: 2px;
                }
                button {
                    width: 120px;
                    height: 40px;
                    color: $fc-white;
                    background: $bg-blue;
                    margin-top: 18px;
                }
            }
            .index_search-bottom {
                height: 32px;
                display: flex;
                justify-content: center;
                background: #f8f8f8;
                padding-left: 15px;
                &>p {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    color: $fc-gray;
                    margin-right: 34px;
                    i {
                        margin-right: 8px;
                    }
                }
            }
        }
        .index_search_table {
            width: 220px;
            height: 174px;
            padding: 0 10px;
            box-sizing: border-box;
            background: $bg-white;
            @include boxShadow();
            table {
                width: 100%;
                th {
                    line-height: 40px;
                    font-size: 14px;
                    color: $fc-base;
                    font-weight: normal;
                    text-align: left;
                    border-bottom: 1px solid $border-gray;
                    span {
                        font-size: 16px;
                        color: $fc-red;
                    }
                }
                td {
                    font-size: 12px;
                    color: $fc-base;
                    line-height: 30px;
                }
                tr:nth-child(1) {
                    td {
                        padding-top: 9px;
                    }
                }
            }
        }
    }
    .index_title {
        @include indexBg;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 33px;
        padding-bottom: 20px;
        h1 {
            font-size: 22px;
            color: $fc-base;
        }
        a {
            font-size: 14px;
            color: $fc-gray;
            &:hover {
                color: $fc-blue;
            }
        }
    }
    //聚订单
    .index_jdingdan {
        @include indexBg;
        display: flex;
        justify-content: space-between;
        height: 457px;
        .left {
            display: flex;
            .left-banner {
                .left-banner-img {
                    width: 240px;
                    height: 338px;
                    overflow: hidden;
                }
                .left-banner-text {
                    width: 240px;
                    height: 119px;
                    background: $bg-blue;
                    p {
                        font-size: 16px;
                        color: $fc-white;
                        text-align: center;
                        padding-top: 26px;
                        padding-bottom: 18px;
                    }
                    a {
                        display: block;
                        width: 120px;
                        height: 40px;
                        box-sizing: border-box;
                        border: 2px solid $border-white;
                        font-size: 16px;
                        color: $fc-white;
                        line-height: 36px;
                        text-align: center;
                        margin: 0 auto;
                        transition: all 0.5s;
                        cursor: pointer;
                        &:hover {
                            border: 2px solid $border-blue-dark;
                            background: $bg-white;
                            color: $fc-blue;
                        }
                    }
                }
            }
            .left-col-box {
                display: flex;
                flex-wrap: wrap;
                background: $bg-white;
                width: 651px;
                height: 457px;
                overflow: hidden;
                .left-col {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 216px;
                    height: 228px;
                    border-right: 1px solid $border-gray;
                    border-bottom: 1px solid $border-gray;
                    position: relative;
                    &:hover {
                        &>.sub {
                            background: rgba(73, 96, 165, .85);
                            p {
                                top: 0px;
                            }
                            button {
                                top: 0px;
                            }
                        }
                    }
                    img {
                        width: 110px;
                        height: 110px;
                        display: block;
                        margin-top: 24px;
                        margin-bottom: 28px;
                    }
                    &>h1 {
                        font-size: 14px;
                        color: $fc-base;
                        margin-bottom: 10px;
                    }
                    &>p {
                        font-size: 12px;
                        color: $fc-gray;
                        display: flex;
                        align-items: center;
                        i {
                            margin-right: 6px;
                        }
                    }
                    &>.sub {
                        transition: all 0.3s;
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                        //background: rgba(73, 96, 165, .85);
                        padding-top: 66px;
                        overflow: hidden;
                        p {
                            text-align: center;
                            font-size: 12px;
                            color: $fc-white;
                            padding-bottom: 8px;
                            position: relative;
                            top: -200px;
                            transition: all 0.5s;
                        }
                        button {
                            display: block;
                            width: 120px;
                            height: 40px;
                            border: 2px solid $border-white;
                            font-size: 14px;
                            color: $fc-white;
                            background: transparent;
                            margin: 38px auto 0 auto;
                            position: relative;
                            top: 200px;
                            transition: all 0.5s;
                        }
                    }
                }
            }
        }
        .right {
            width: 290px;
            height: 457px;
            box-sizing: border-box;
            background: $bg-white;
            padding: 0 15px;
            .right-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid $border-gray;
                p {
                    font-size: 18px;
                    color: $fc-title-gray;
                    line-height: 42px;
                }
                .right-title-focus {
                    display: flex;
                    &>.focus {
                        width: 10px;
                        height: 10px;
                        background: #b5b4b4;
                        border-radius: 50%;
                        cursor: pointer;
                        margin-left: 8px;
                    }
                    &>.cur {
                        background: #4960a5;
                    }
                }
            }
            .right-col {
                display: flex;
                padding-top: 15px;
                padding-bottom: 20px;
                border-bottom: 1px solid $border-gray;
                &:nth-child(3n) {
                    border-bottom: none;
                }
                .right-col-img {
                    width: 85px;
                    height: 98px;
                    overflow: hidden;
                    margin-right: 14px;
                    img {
                        display: block;
                    }
                }
                .right-col-text {
                    &>h1 {
                        font-size: 14px;
                        color: $fc-base;
                        padding-top: 10px;
                        margin-bottom: 40px;
                    }
                    .right-col-text-bt-box {
                        display: flex;
                        .right-col-text-bt {
                            width: 66px;
                            &:nth-child(1) {
                                border-right: 1px solid $border-gray;
                                margin-right: 12px;
                            }
                            &>h1 {
                                font-size: 12px;
                                color: $fc-gray;
                                padding-bottom: 6px;
                            }
                            &>p {
                                font-size: 12px;
                                color: $fc-title-gray;
                                padding-bottom: 3px;
                            }
                        }
                    }
                }
            }
        }
    }
    //聚设计
    .index_jsheji {
        @include indexBg;
        display: flex;
        justify-content: space-between;
        .index_jsheji-col {
            display: block;
            width: 285px;
            height: 404px;
            background: $bg-white;
            position: relative;
            .index_jsheji-col-works {
                width: 285px;
                height: 260px;
                overflow: hidden;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .index_jsheji-col-po {
                position: absolute;
                bottom: 30px;
                width: 100%;
                &>.head {
                    width: 112px;
                    height: 112px;
                    border-radius: 50%;
                    border: 4px solid $border-white;
                    margin: 0 auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                &>h1 {
                    font-size: 18px;
                    color: $fc-base;
                    text-align: center;
                    padding-top: 16px;
                    padding-bottom: 8px;
                }
                &>p {
                    font-size: 14px;
                    color: $fc-gray;
                    text-align: center;
                }
            }
        }
    }
    //聚品牌
    .index_jpinpai {
        display: flex;
        justify-content: space-between;
        .bigimg {
            width: 480px;
            height: 380px;
        }
        .shop-list {
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
            width: 703px;
            height: 380px;
            .img-wrap {
                @include imgwrap(175px, 126px);
                border-right: 1px solid $border-gray;
                border-bottom: 1px solid $border-gray;
                &:nth-child(4n) {
                    border-right: 0;
                }
                &:nth-last-child(1) {
                    border-bottom: 0;
                }
                &:nth-last-child(2) {
                    border-bottom: 0;
                }
                &:nth-last-child(3) {
                    border-bottom: 0;
                }
                &:nth-last-child(4) {
                    border-bottom: 0;
                }
            }
        }
    }
    //聚好款
    .index_jhaokuang {
        @include indexBg;
        height: 450px;
        display: flex;
        justify-content: space-between;
        .index_jhaokuang-left {
            display: flex;
            &>.left {
                position: relative;
                .left-banner {
                    img {
                        display: block;
                    }
                }
                .left-po {
                    position: absolute;
                    bottom: 0px;
                    width: 240px;
                    height: 120px;
                    box-sizing: border-box;
                    padding: 16px 23px;
                    background: rgba(0, 0, 0, .5);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-content: space-between;
                    a {
                        width: 90px;
                        height: 40px;
                        position: relative;
                        display: block;
                        justify-content: center;
                        align-items: center;
                        overflow: hidden;
                        img {
                            height: 100%;
                            display: block;
                            position: absolute;
                            left: 50%;
                            transform: translate(-50%, 0);
                        }
                    }
                }
            }
            &>.right {
                width: 410px;
                height: 450px;
                background: $bg-white;
                display: flex;
                padding: 15px 0;
                box-sizing: border-box;
                overflow: hidden;
                .right-nav-box {
                    width: 220px;
                    padding: 0 14px;
                    box-sizing: border-box;
                    border-right: 1px solid $border-gray;
                    .right-nav {
                        &:first-child {
                            h1 {
                                padding-top: 3px;
                            }
                        }
                        &:last-child {
                            p {
                                background-image: none;
                            }
                        }
                        h1 {
                            font-size: 14px;
                            color: $fc-base;
                            padding-bottom: 10px;
                            padding-top: 20px;
                        }
                        p {
                            padding-bottom: 5px;
                            background-image: url(../img/border_dotted_gray.png);
                            background-repeat: repeat-x;
                            background-position: bottom;
                            a {
                                font-size: 12px;
                                color: $fc-title-gray;
                                margin-right: 16px;
                                margin-bottom: 10px;
                                display: inline-block;
                                &:hover {
                                    color: $fc-blue;
                                }
                            }
                        }
                    }
                }
                .right-banner {
                    padding: 0 15px;
                    box-sizing: border-box;
                    width: 190px;
                    .right-banner-col {
                        height: 210px;
                        display: block;
                        &:nth-child(1) {
                            display: block;
                            border-bottom: 1px solid $border-gray;
                        }
                    }
                }
            }
        }
        .index_jhaokuang-right {
            display: flex;
            .index_jhaokuang-right-banner {
                display: block;
                img {
                    display: block;
                }
            }
            .index_jhaokuang-right-week {
                width: 290px;
                box-sizing: border-box;
                background: $bg-white;
                padding: 0 15px;
                &>.title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid $border-gray;
                    h1 {
                        font-size: 18px;
                        color: $fc-title-gray;
                        line-height: 42px;
                    }
                    &>.title-focus {
                        display: flex;
                        &>.focus {
                            width: 10px;
                            height: 10px;
                            cursor: pointer;
                            background: #b5b4b4;
                            border-radius: 50%;
                            margin-left: 8px;
                        }
                        &>.cur {
                            background: $bg-blue;
                        }
                    }
                }
                &>div>.con {
                    padding-top: 15px;
                    padding-bottom: 20px;
                    display: flex;
                    border-bottom: 1px solid $border-gray;
                    &:nth-child(3n) {
                        border-bottom: none;
                    }
                    .con-img {
                        width: 85px;
                        height: 98px;
                        overflow: hidden;
                        margin-right: 14px;
                        img {
                            display: block;
                        }
                    }
                    .con-text {
                        &>h1 {
                            font-size: 14px;
                            color: $fc-title-gray;
                            padding-top: 10px;
                            padding-bottom: 14px;
                            &>span {
                                color: #fe5e06;
                            }
                        }
                        &>h2 {
                            font-size: 12px;
                            color: $fc-gray;
                            max-width: 150px;
                            @include ellipsis;
                            padding-bottom: 10px;
                        }
                        &>p {
                            display: flex;
                            align-items: center;
                            font-size: 12px;
                            color: $fc-gray;
                            i {
                                margin-right: 6px;
                            }
                        }
                    }
                }
            }
        }
    }
    //聚服务
    .index_jfuwu {
        @include indexBg;
        display: flex;
        justify-content: space-between;
        .index_jfuwu-left {
            width: 240px;
            height: 460px;
            .index_jfuwu-left-img {
                width: 240px;
                height: 340px;
                overflow: hidden;
                img {
                    display: block;
                }
            }
            .index_jfuwu-left-text {
                width: 240px;
                height: 120px;
                background: $bg-blue;
                p {
                    font-size: 16px;
                    color: $fc-white;
                    text-align: center;
                    padding-top: 27px;
                    padding-bottom: 19px;
                }
                a {
                    display: block;
                    font-size: 16px;
                    width: 120px;
                    height: 40px;
                    box-sizing: border-box;
                    border: 2px solid $border-white;
                    line-height: 36px;
                    text-align: center;
                    margin: 0 auto;
                    color: $fc-white;
                    transition: all 0.5s;
                    span {
                        margin-left: 8px;
                    }
                    &:hover {
                        border: 2px solid $border-blue-dark;
                        background: $bg-white;
                        color: $fc-blue;
                    }
                }
            }
        }
        .index_jfuwu-col {
            background: $bg-white;
            width: 300px;
            height: 460px;
            overflow: hidden;
            .index_jfuwu-col-img {
                width: 300px;
                height: 350px;
                img {
                    display: block;
                }
            }
            .index_jfuwu-col-text {
                width: 300px;
                height: 110px;
                position: relative;
                background: $bg-white;
                top: 0px;
                transition: all 0.2s;
                &:hover {
                    top: -40px;
                }
                &>h1 {
                    font-size: 16px;
                    color: $fc-base;
                    text-align: center;
                    padding-top: 18px;
                    padding-bottom: 20px;
                }
                &>.text {
                    padding: 0 15px;
                    box-sizing: border-box;
                    display: flex;
                    .text-col {
                        width: 33.3333%;
                        border-right: 1px solid $border-gray;
                        padding-left: 16px;
                        &:first-child {
                            padding-left: 0px;
                        }
                        &:last-child {
                            border-right: none;
                        }
                        &>h1 {
                            font-size: 12px;
                            color: $fc-gray;
                            padding-bottom: 7px;
                        }
                        &>p {
                            font-size: 12px;
                            color: $fc-title-gray;
                        }
                    }
                }
                &>a {
                    position: absolute;
                    bottom: -40px;
                    display: block;
                    width: 300px;
                    height: 40px;
                    background: $bg-blue;
                    line-height: 40px;
                    text-align: center;
                    color: $fc-white;
                    font-size: 16px;
                }
            }
        }
    }
    //聚衣会
    .index_jyihui {
        @include indexBg;
        display: flex;
        justify-content: space-between;
        .index_jyihui-leftnav {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 240px;
            height: 450px;
            a,
            img {
                display: block;
            }
        }
        .index_jyihui-right {
            display: flex;
            width: 940px;
            .index_jyihui-right-banner {
                position: relative;
                &>img {
                    display: block;
                }
                &>.btn {
                    position: absolute;
                    bottom: 30px;
                    width: 100%;
                    padding: 0 40px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    &>a {
                        display: block;
                        width: 112px;
                        height: 40px;
                        border: 2px solid $border-white;
                        text-align: center;
                        line-height: 36px;
                        font-size: 16px;
                        color: $fc-white;
                        box-sizing: border-box;
                    }
                }
            }
            .index_jyihui-right-col-box {
                display: flex;
                flex-wrap: wrap;
                padding: 15px;
                box-sizing: border-box;
                background: $bg-white;
                .index_jyihui-right-col {
                    width: 50%;
                    box-sizing: border-box;
                    padding: 0 15px;
                    &:nth-child(1) {
                        border-right: 1px solid $border-gray;
                        border-bottom: 1px solid $border-gray;
                    }
                    &:nth-last-child(1) {
                        border-top: 1px solid $border-gray;
                        border-left: 1px solid $border-gray;
                    }
                    &>h1 {
                        font-size: 16px;
                        color: $fc-base;
                        padding-top: 10px;
                        padding-bottom: 14px;
                    }
                    &>p {
                        display: flex;
                        color: $fc-gray;
                        padding-bottom: 10px;
                        i {
                            margin-right: 6px;
                        }
                    }
                    &>.btnimgbox {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        img{
                            width: 220px;
                            height: 110px;
                            margin-right: 15px;
                        }
                        &>a {
                            width: 90px;
                            height: 40px;
                            box-sizing: border-box;
                            line-height: 36px;
                            border: 2px solid $border-blue;
                            text-align: center;
                            font-size: 16px;
                            color: $fc-blue;
                           flex-shrink:0;
                        }
                    }
                }
            }
        }
    }
    //聚企业
    .index_jqiye {
        @include indexBg;
        padding-bottom: 40px;
        .index_jqiye-comlist-box {
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            .index_jqiye-comlist {
                width: 386px;
                height: 254px;
                background: $bg-white;
                box-sizing: border-box;
                padding: 0 20px;
                &>.title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 6px;
                    .title-text {
                        &>h1 {
                            font-size: 16px;
                            color: $fc-base;
                            padding-top: 20px;
                            padding-bottom: 14px;
                            max-width: 210px;
                            @include ellipsis;
                        }
                        &>p {
                            display: flex;
                            color: $fc-gray;
                            padding-bottom: 10px;
                            i {
                                margin-right: 6px;
                            }
                        }
                    }
                    &>a {
                        display: block;
                        width: 110px;
                        height: 40px;
                        box-sizing: border-box;
                        border: 2px solid $border-blue;
                        line-height: 36px;
                        color: $fc-blue;
                        text-align: center;
                        font-size: 16px;
                    }
                }
                &>.goods-box {
                    display: flex;
                    justify-content: space-between;
                    .goods {
                        position: relative;
                        .goods-img {
                            width: 100px;
                            height: 120px;
                            overflow: hidden;
                        }
                        .goods-price {
                            position: absolute;
                            bottom: 0px;
                            width: 70px;
                            height: 24px;
                            color: $fc-white;
                            text-indent: 8px;
                            line-height: 24px;
                            background: rgba(0, 0, 0, .5);
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        .index_jqiye-news-box {
            display: flex;
            justify-content: space-between;
            .index_jqiye-news {
                width: 386px;
                &>h1 {
                    font-size: 20px;
                    color: $fc-base;
                    padding-left: 10px;
                    border-left: 4px solid $border-blue;
                    margin-bottom: 14px;
                }
                .index_jqiye-news-img {
                    width: 386px;
                    height: 208px;
                    overflow: hidden;
                    img {
                        display: block;
                    }
                }
                .index_jqiye-news-nav {
                    background: $fc-white;
                    padding: 20px 12px 10px 12px;
                    box-sizing: border-box;
                    a {
                        display: block;
                        line-height: 1;
                        width: 100%;
                        @include ellipsis;
                        font-size: 14px;
                        color: $fc-title-gray;
                        margin-bottom: 14px;
                        &:hover {
                            text-decoration: underline;
                        }
                        span {
                            color: $fc-base;
                        }
                    }
                }
            }
        }
    }
}

//登录与注册
//登录与注册 顶部
.login_top-bg {
    box-shadow: 0px 5px 10px 0px rgba(238, 237, 237, 0.35);
    min-width: 1200px;
}

.login_top {
    display: flex;
    height: 100px;
    justify-content: space-between;
    align-items: center;
    .login_top-left {
        display: flex;
        .login_top-left-logo {
            display: block;
            img {
                display: block;
            }
        }
        h1 {
            font-weight: normal;
            color: $fc-title-gray;
            line-height: 1;
            padding-top: 14px;
            padding-bottom: 3px;
            padding-left: 20px;
            border-left: 1px solid #ddd;
            margin-top: 6px;
            margin-left: 20px;
        }
    }
    .login_top-right {
        padding-top: 20px;
        p {
            font-size: 16px;
            color: $fc-gray;
            line-height: 1;
            a {
                color: $fc-base;
            }
        }
    }
}

//登录内容
.login-bg {
    min-width: 1200px;
    background: url(../img/login_bg.png) center;
}

.login {
    height: 550px;
    //background: url(../img/login_bg.png);
    display: flex;
    justify-content: flex-end;
    .login-con {
        background: $bg-white;
        width: 350px;
        height: 403px;
        margin-top: 74px;
        position: relative;
        .login-con-sub {
            padding: 0 20px;
            h1 {
                font-size: 18px;
                color: $fc-title-gray;
                line-height: 1;
                padding-top: 45px;
                padding-bottom: 19px;
            }
            .login-con-sub-input {
                display: flex;
                border: 1px solid #bfbfbf;
                margin-bottom: 20px;
                input {
                    font-size: 14px;
                    line-height: 1;
                    text-indent: 15px;
                    color: $fc-base;
                }
            }
            .login-con-sub-a {
                display: flex;
                justify-content: space-between;
                margin-bottom: 30px;
                a {
                    line-height: 1;
                    font-size: 14px;
                    color: $fc-gray;
                    display: flex;
                    cursor: pointer;
                    i {
                        border: 1px solid #bfbfbf;
                        margin-right: 10px;
                        position: relative;
                        top: -1px;
                        width: 14px;
                        height: 14px;
                    }
                }
            }
            .login-con-sub-btn {
                display: block;
                width: 100%;
                height: 42px;
                border: none;
                background: $bg-blue;
                color: $fc-white;
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 15px;
                cursor: pointer;
                margin-bottom: 20px;
            }
            .login-con-sub-btn_a {
                display: block;
                width: 100%;
                height: 42px;
                line-height: 40px;
                box-sizing: border-box;
                border: 1px solid #ddd;
                font-size: 18px;
                color: $fc-title-gray;
                text-align: center;
                background: $bg-gray;
                font-weight: bold;
            }
        }
    }
}

//注册
.login_res {
    display: flex;
    justify-content: space-between;
    padding-top: 90px;
    padding-bottom: 64px;
    border-bottom: 1px solid #e5e5e5;
    .left {
        box-sizing: border-box;
        padding-left: 170px;
        padding-right: 120px;
        padding-top: 4px;
        width: 688px;
        border-right: 1px solid #e5e5e5;
        .left-input {
            display: flex;
            border: 1px solid #ddd;
            height: 52px;
            align-items: center;
            padding-left: 20px;
            margin-bottom: 30px;
            p {
                padding-top: 12px;
                width: 72px;
                font-size: 14px;
                color: $fc-title-gray;
                text-align: justify;
                span {
                    display: inline-block;
                    padding-left: 100%;
                }
            }
            input {
                flex: 1;
                text-indent: 40px;
            }
            &>button {
                width: 110px;
                height: 46px;
                border: none;
                font-size: 14px;
                color: $fc-title-gray;
                cursor: pointer;
                margin-right: 3px;
            }
        }
        &>button {
            width: 100%;
            height: 54px;
            border: none;
            background: $bg-blue;
            color: #f8f8f8;
            font-size: 16px;
            cursor: pointer;
            margin-bottom: 30px;
        }
        .left-agree {
            display: flex;
            justify-content: center;
            align-items: center;
            i {
                width: 16px;
                height: 16px;
                border: 1px solid #a5a5a5;
                border-radius: 2px;
                cursor: pointer;
                background-color: #ececec;
                margin-right: 10px;
            }
            p {
                color: $fc-gray;
                font-size: 14px;
            }
            a {
                color: #2d53a1;
                font-size: 14px;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    .right {
        .right-moble {
            background-image: url(../img/res_mobile.png);
            width: 228px;
            height: 446px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            padding-top: 95px;
            box-sizing: border-box;
            margin-right: 168px;
            margin-top: 17px;
            img {
                display: block;
                margin-bottom: 30px;
            }
            p {
                font-size: 14px;
                color: #d11421;
                padding-bottom: 16px;
            }
        }
    }
}

//忘记密码 企业入驻 背景
.for_com-bg {
    background-image: url(../img/forget_pwd.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #ececed;
}

//忘记密码 企业入驻 页脚背景色
.for_com-footerbg {
    background: #ececed;
}

//忘记密码
.forget_pwd {
    height: 446px;
    padding-top: 33px;
    box-sizing: border-box;
    .forget_pwd-top {
        height: 100px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        background: rgba(255, 255, 255, .5);
        padding: 0 45px;
        .forget_pwd-top-bar {
            margin-top: 34px;
            width: 100%;
            height: 4px;
            background: #bfbfbf;
            border-radius: 2px;
            position: relative;
            &>.bar {
                position: absolute;
                height: 4px;
                background: #6380d5;
                border-radius: 2px;
                top: 0px;
                left: 0px;
            }
            &>.bar1 {
                width: 138.75px;
            }
            &>.bar2 {
                width: 416.25px;
            }
            &>.bar3 {
                width: 700px;
            }
            &>.bar4 {
                width: 1110px;
            }
            &>.con {
                position: absolute;
                top: -8px;
                display: flex;
                justify-content: space-around;
                width: 100%;
                &>.con-col {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .con-col-cir {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 20px;
                        background: #bfbfbf;
                        color: $fc-white;
                        margin-bottom: 15px;
                        font-weight: bold;
                    }
                    p {
                        font-size: 12px;
                        color: $fc-title-gray;
                    }
                }
                &>.cur {
                    .con-col-cir {
                        background: #6380d5;
                    }
                    p {
                        font-weight: bold;
                        color: #6380d5;
                    }
                }
            }
        }
    }
    .forget_pwd-bottom {
        height: 300px;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        border-top: none;
        background: rgba(255, 255, 255, .8);
        box-shadow: 0px 2px 7.52px 0.48px rgba(0, 0, 0, 0.1);
        &>.con {
            width: 400px;
            padding-top: 40px;
            margin: 0 auto;
            &>a {
                display: block;
                width: 150px;
                height: 42px;
                text-align: center;
                line-height: 42px;
                color: $fc-white;
                background: $bg-blue;
                margin-left: 92px;
                font-size: 16px;
            }
            .con-col {
                display: flex;
                margin-bottom: 20px;
                h1 {
                    font-size: 12px;
                    color: $fc-gray;
                    line-height: 42px;
                    margin-right: 20px;
                    width: 72px;
                    text-align: right;
                    span {
                        color: #d84747;
                        margin-right: 6px;
                    }
                }
                h2 {
                    font-size: 16px;
                    line-height: 42px;
                    font-weight: bold;
                }
                input {
                    width: 300px;
                    height: 42px;
                    box-sizing: border-box;
                    border: 1px solid #ddd;
                    background: transparent;
                    text-indent: 20px;
                }
            }
            //验证码
            .con-col-input_code {
                input {
                    width: 150px;
                }
                img {
                    margin: 6px 10px 0 10px;
                    width: 100px;
                    height: 30px;
                    cursor: pointer;
                }
                p {
                    font-size: 12px;
                    line-height: 42px;
                    color: #4a61a6;
                    cursor: pointer;
                }
                button {
                    display: block;
                    width: 120px;
                    height: 42px;
                    background: #f7f7f7;
                    border: 1px solid #ddd;
                    font-size: 12px;
                    color: $fc-base;
                    margin-left: 10px;
                }
            }
        }
        &>.con_complete {
            display: flex;
            justify-content: center;
            padding-top: 80px;
            i {
                margin-right: 40px;
            }
            .con_complete-right {
                p {
                    font-size: 16px;
                    color: $fc-gray;
                    padding-top: 6px;
                    padding-bottom: 20px;
                }
                a {
                    display: block;
                    font-size: 16px;
                    width: 140px;
                    height: 42px;
                    text-align: center;
                    line-height: 42px;
                    color: $fc-white;
                    background: $bg-blue;
                }
            }
        }
    }
}

//企业入驻
.company_entry {
    padding-top: 33px;
    padding-bottom: 10px;
    .company_entry-top {
        height: 100px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        background: rgba(255, 255, 255, .5);
        padding: 0 45px;
        .company_entry-top-bar {
            margin-top: 34px;
            width: 100%;
            height: 4px;
            background: #bfbfbf;
            border-radius: 2px;
            position: relative;
            &>.bar {
                position: absolute;
                height: 4px;
                background: #6380d5;
                border-radius: 2px;
                top: 0px;
                left: 0px;
                transition: all 0.5s linear;
            }
            &>.bar1 {
                width: 111px;
            }
            &>.bar2 {
                width: 315px;
            }
            &>.bar3 {
                width: 540px;
            }
            &>.bar4 {
                width: 760px;
            }
            &>.bar5 {
                width: 1110px;
            }
            &>.con {
                position: absolute;
                top: -8px;
                display: flex;
                justify-content: space-around;
                width: 100%;
                &>.con-col {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .con-col-cir {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 20px;
                        background: #bfbfbf;
                        color: $fc-white;
                        margin-bottom: 15px;
                        font-weight: bold;
                    }
                    p {
                        font-size: 12px;
                        color: $fc-title-gray;
                    }
                }
                &>.cur {
                    .con-col-cir {
                        background: #6380d5;
                        transition: all 0.5s linear 0.5s;
                    }
                    p {
                        font-weight: bold;
                        color: #6380d5;
                        transition: all 0.5s linear 0.5s;
                    }
                }
            }
        }
    }
    .company_entry-part {
        border: 1px solid #ddd;
        border-top: none;
        background: rgba(255, 255, 255, .8);
        padding-top: 30px;
        box-sizing: border-box;
        box-shadow: 0px 2px 7.52px 0.48px rgba(0, 0, 0, 0.1);
        &>.con {
            //padding-left: 150px;
            padding-bottom: 20px;
            //更改时间控件里的图标
            .el-icon-date:before {
                content: "";
            }
            .el-input__prefix .el-input__icon {
                width: 24px;
                background-image: url(../img/date_icon.png);
                background-repeat: no-repeat;
                background-position: center;
            }
            .el-input__prefix {
                left: 10px;
            }
            .el-input--prefix .el-input__inner {
                padding-left: 46px;
            }
            //宽度
            .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
                width: 160px;
            }
            //输入框
            .el-input__inner {
                border-radius: 0px;
                background: transparent;
                border: 1px solid #ddd;
                cursor: pointer;
            }
            &>h1 {
                text-indent: 150px;
                font-size: 18px;
                color: $fc-base;
                font-weight: bold;
                margin-bottom: 24px;
            }
            .con-col {
                display: flex;
                margin-bottom: 20px;
                //单独一行的提示文字
                &>h1 {
                    width: 884px;
                    height: 36px;
                    line-height: 36px;
                    background: #f8f8f8;
                    margin: 0 auto 0 auto;
                    font-size: 12px;
                    color: $fc-gray;
                    text-align: center;
                }
                //radio选项
                .con-col-radio-box {
                    display: flex;
                    flex-wrap: wrap;
                    max-width: 800px;
                    padding-top: 14px;
                    .con-col-radio {
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        margin-right: 24px;
                        margin-bottom: 14px;
                        .con-col-radio-btn {
                            margin-right: 8px;
                            width: 14px;
                            height: 14px;
                            border: 1px solid $border-blue;
                            border-radius: 50%;
                            box-sizing: border-box;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .con-col-radio-btn-cur {
                                width: 8px;
                                height: 8px;
                                background: $bg-blue;
                                border-radius: 50%;
                            }
                        }
                        &>p {
                            font-size: 12px;
                            color: $fc-base;
                        }
                    }
                }
                //输入框前面的标题文字
                .con-col-title {
                    width: 250px;
                    span {
                        font-size: 12px;
                        color: #d84747;
                        margin-right: 6px;
                    }
                    font-size:12px;
                    color:$fc-title-gray;
                    line-height:42px;
                    text-align: right;
                    margin-right:20px;
                }
                //通用输入框
                .con-col-input {
                    width: 400px;
                    height: 42px;
                    border: 1px solid #ddd;
                    background: transparent;
                    text-indent: 10px;
                }
                //通用输入框 短
                .con-col-input_short {
                    width: 120px;
                }
                //通用输入框 后面跟的解释文字
                .con-col-input_text {
                    font-size: 12px;
                    color: $fc-gray;
                    line-height: 42px;
                    margin-left: 10px;
                }
                //两行文字
                .con-col-input_textarea {
                    height: 42px;
                    margin-left: 10px;
                    font-size: 12px;
                    color: $fc-gray;
                    line-height: 20px;
                    padding-top: 2px;
                }
                //下拉选项框
                .con-col-option {
                    position: relative;
                    width: 400px;
                    cursor: pointer;
                    margin-right: 10px;
                    .con-col-option-cur {
                        width: 100%;
                        height: 42px;
                        border: 1px solid #ddd;
                        box-sizing: border-box;
                        text-indent: 10px;
                        line-height: 42px;
                        font-size: 12px;
                        color: $fc-gray;
                        position: relative;
                        i {
                            position: absolute;
                            top: 18px;
                            right: 10px;
                        }
                    }
                    .con-col-option-sub {
                        display: none;
                        position: absolute;
                        z-index: 50;
                        width: 100%;
                        top: 41px;
                        left: 0px;
                        border: 1px solid #ddd;
                        box-sizing: border-box;
                        background: #f6f5f6;
                        max-height: 320px;
                        overflow: hidden;
                        overflow-y: auto;
                        p {
                            font-size: 12px;
                            line-height: 40px;
                            text-indent: 10px;
                            color: $fc-gray;
                            &:hover {
                                background: $bg-blue;
                                color: $fc-white;
                            }
                        }
                        &>.cur {
                            background: $bg-blue;
                            color: $fc-white;
                        }
                    }
                }
                //省市区 选项框
                .con-col-option_area {
                    width: 140px;
                }
                //上传图片 后面的提示文字
                .con-col-img_text {
                    font-size: 12px;
                    color: $fc-gray;
                    line-height: 80px;
                    margin-left: 10px;
                }
                //文本域
                .con-col-textarea {
                    width: 400px;
                    height: 120px;
                    border: 1px solid $border-gray;
                    box-sizing: border-box;
                    resize: none;
                    background: transparent;
                    padding: 14px 10px;
                    font-size: 12px;
                    color: $fc-gray;
                }
                //时间控件之间的 / 符号间隔
                .con-col-interval {
                    width: 30px;
                    text-align: center;
                    line-height: 42px;
                    font-size: 12px;
                    color: $fc-gray;
                }
            }
        }
        //品牌入驻_审核进度
        .pinpai_entry_review {
            padding: 0 100px;
            &>h1 {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 26px;
            }
            &>.show {
                padding: 20px 0 25px 20px;
                background: #f9e2bd;
                display: flex;
                margin-bottom: 44px;
                i {
                    margin-right: 14px;
                }
                .show-text {
                    &>h1 {
                        font-size: 16px;
                        color: $fc-base;
                        margin-bottom: 12px;
                    }
                    &>p {
                        font-size: 14px;
                        color: #b08746;
                    }
                }
            }
            &>.msg {
                .msg-col {
                    display: flex;
                    p {
                        font-size: 14px;
                        color: $fc-base;
                        margin-bottom: 12px;
                    }
                    .msg-col-head {
                        width: 100px;
                        text-align: right;
                    }
                }
            }
            &>.progress {
                position: relative;
                height: 150px;
                display: flex;
                justify-content: space-around;
                margin-bottom: 70px;
                .progress-bar {
                    position: absolute;
                    top: 50%;
                    margin-top: -2px;
                    width: 100%;
                    height: 4px;
                    background: #bfbfbf;
                    border-radius: 2px;
                    .progress-bar-speed {
                        height: 100%;
                        border-radius: 2px;
                        background: #6380d5;
                    }
                    .progress-bar-speed1 {
                        $width: 100%;
                        width: $width/6;
                    }
                    .progress-bar-speed2 {
                        $width: 100%;
                        width: $width*3/6;
                    }
                    .progress-bar-speed3 {
                        width: 100%;
                    }
                }
                .progress-col {
                    position: relative;
                    width: 80px;
                    &>h1 {
                        font-size: 16px;
                        color: #6380d5;
                        text-align: center;
                        margin-top: 30px;
                        margin-bottom: 18px;
                    }
                    &>h2 {
                        margin: 0 auto 12px auto;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        font-size: 14px;
                        color: $fc-white;
                        font-weight: bold;
                        background: #bfbfbf;
                        text-align: center;
                        line-height: 20px;
                    }
                    &>p {
                        text-align: center;
                        font-size: 12px;
                        color: $fc-gray;
                        margin-bottom: 6px;
                    }
                }
                .progress-col_cur {
                    &>h2 {
                        background: #6380d5;
                    }
                    &>p {
                        color: $fc-base;
                    }
                }
            }
        }
    }
    .company_entry-bottom {
        border-top: 1px solid $border-gray;
        display: flex;
        justify-content: flex-end;
        padding: 23px 0;
        .company_entry-bottom-next {
            width: 400px;
            height: 54px;
            margin-right: 30px;
            background: $bg-blue;
            color: #f8f8f8;
            font-size: 16px;
            &>span {
                margin-left: 10px;
                font-weight: bold;
            }
        }
        .company_entry-bottom-prev {
            width: 150px;
            height: 54px;
            box-sizing: border-box;
            background: #fcfcfc;
            border: 1px solid #bfbfbf;
            font-size: 16px;
            color: $fc-gray;
            margin-right: 16px;
            &>span {
                margin-right: 10px;
                font-weight: bold;
            }
        }
    }
    .pinpai_entry-bottom {
        padding: 24px 0;
        justify-content: center;
        &>button {
            width: 180px;
            height: 54px;
            background: $bg-blue;
            font-size: 16px;
            color: $fc-white;
            margin:0 20px;
        }
    }
}

// 公告列表
.gongg-wrap {
    font-size: 12px;
    padding-top: 12px;
    .searchbar {
        padding: 12px 10px;
        background-color: #fff;
        margin-bottom: 8px;
        .search-wrap {
            border: 1px solid $border-gray;
            width: 318px;
            input {
                width: 222px;
                padding: 0 8px;
            }
            span {
                background-color: #f2f2f2;
                padding: 6px 14px;
                display: inline-block;
                border-left: 1px solid $border-gray;
            }
        }
    }
    .gongg-con {
        .gongg-list {
            li {
                display: flex;
                justify-content: space-between;
                line-height: 30px;
                background-color: #fff;
                padding: 0 10px;
                &:not(:first-child) {
                    border-bottom: 1px dashed #dddddd;
                }
                &.head {
                    background-color: #a4afd2;
                    color: #fff;
                    padding: 0 10px;
                }
                a {
                    color: $fc-blue;
                }
            }
        }
    }
}

// 公告详情页
.gg-detail {
    padding: 30px 0 112px 0;
    .title {
        font-size: 24px;
        color: $fc-base;
        border-bottom: 1px solid $border-gray;
        padding: 60px 0 20px 0;
        text-align: center;
    }
    .time {
        font-size: 12px;
        color: $fc-gray;
        padding: 10px 0 38px 0;
        text-align: center;
    }
    .content {
        min-height: 324px;
    }
}